<template>
  <zero-container>
    <template slot="main">
      <template>
        <div>
          <el-dropdown trigger="click"
                       :hide-on-click="false">
            <el-button icon="el-icon-s-grid"
                       circle></el-button>
            <!-- <span class="el-dropdown-link">
              <i class="el-icon-s-grid"></i>
            </span> -->
            <el-dropdown-menu slot="dropdown">
              <el-checkbox-group v-model="checkedTableColumns">
                <el-dropdown-item divided>
                  <el-checkbox key="all"
                               label="all">全选</el-checkbox>
                </el-dropdown-item>
                <el-dropdown-item v-for="column in tableColumns"
                                  :key="column.prop"
                                  :label="column.prop">
                  <el-checkbox :key="column.prop"
                               :label="column.prop">{{ column.label }}</el-checkbox>
                </el-dropdown-item>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
          <el-table :data="tableData"
                    border>
            <el-table-column v-for="column in bindTableColumns"
                             :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"></el-table-column>
          </el-table>
        </div>
      </template>
    </template>
  </zero-container>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ],
      tableColumns: [
        {
          prop: 'date',
          label: '日期',
          show: true
        },
        {
          prop: 'name',
          label: '姓名',
          show: true
        },
        {
          prop: 'address',
          label: '地址',
          show: true
        }
      ]
    }
  },
  computed: {
    bindTableColumns () {
      return this.tableColumns.filter((column) => column.show)
    },
    /* 这里使用了getter和setter，这样写的好处不用自己手动监听复选框的选中事件 */
    checkedTableColumns: {
      get () {
        // 返回选中的列名
        return this.bindTableColumns.map(column => column.prop)
      },
      set (checked) {
        // 设置表格列的显示与隐藏
        this.tableColumns.forEach((column, index) => {
          // 如果选中，则设置列显示
          if (checked.includes(column.prop)) {
            column.show = true
          } else {
            // 如果未选中，则设置列隐藏
            column.show = false
          }
        })
      }
    }
  }
}
</script>
